<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Signup · Dorm</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/checkout/">

    

    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/stylesheets/signup.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      .container {
        max-width: 960px;
      }


      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
  </head>

  <body class="bg-light">
    
    <div class="container">
      <main>
      
      <h2>Please Sign Up</h2>
      
      <div class="row g-5">
      <div class="col-md-7 col-lg-8">
        <form action="/signup" method="post" class="needs-validation" novalidate>
          <div class="row g-3">
            <div class="col-sm-5">
              <label for="name" class="form-label">Name</label>
              <input type="text" class="form-control" id="name" name="name" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid name is required.
              </div>
            </div>

            <div class="col-sm-5">
              <label for="studentID" class="form-label">Student ID</label>
              <input type="text" class="form-control" id="studentID" name="studentID" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid studentID is required.
              </div>
            </div>

            <div class="col-sm-2">
              <label for="gender" class="form-label">Gender</label>
              <select class="form-select" id="gender" name="gender" required>
                <option value="">...</option>
                <option value="F">F</option>
                <option value="M">M</option>
              </select>
              <div class="invalid-feedback">
                Please select a valid gender.
              </div>
            </div>

            
            <div class="col-md-6">
              <label for="username" class="form-label">Username</label>
              <input type="text" class="form-control" id="username" name="username" placeholder="" required>
              <small class="text-muted">name for signin</small>
              <div class="invalid-feedback">
                Username is required
              </div>
            </div>

            <div class="col-md-6">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" id="password" name="password" placeholder="" required>
              <div class="invalid-feedback">
                Password is required
              </div>
            </div>

          <hr class="my-4">

          <input class="w-100 btn btn-primary btn-lg" type="submit" value="sumbmit" />

          <!-- <button class="w-100 btn btn-primary btn-lg" type="submit">Sign up</button> -->
        </form>
      </div>
      </div>
      </main>
    </div>


    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/javascripts/form-validation.js"></script>
  </body>
</html>
